import React, { Component } from 'react';
import AutoSuggestBox from 'react-uwp/AutoSuggestBox';
import Button from 'react-uwp/Button';
export default class Search extends Component {
  constructor(props) {
    super(props);
    this.state = {
      listSource: [
        'Blue',
        'Red',
        'Green',
        'Grey',
        'Black',
        'Yellow',
        'Purple',
        'Brown',
        'White',
        'Orange',
        'Pink',
        'Violet',
        'Olive',
        'Cyan',
        'Magenta',
        'Gold',
        'Lavender',
        'Indigo',
        'Maroon',
        'Turquoise',
        'Chartreuse',
        'Coral'
      ]
    };
  }
  handleChangeValue(value) {
    console.log(value);
  }
  render() {
    const { listSource } = this.state;
    return (
      <div className="dfrc wh100 searchContainer">
        <AutoSuggestBox
          placeholder="输入关键词"
          listSource={listSource}
          onChangeValue={this.handleChangeValue}
          iconSize={40}
          style={{
            flex: 1,
            background: '#fff',
            border: 'none',
            height: '100%',
            borderRadius: '0.16rem 0 0.16rem',
            fontSize: '0.8rem'
          }}
        />
        <Button className="searchBtn">搜索</Button>
      </div>
    );
  }
}
